<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				分割线Divider
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode1 }}</template>
			</code-view>
			
			<div class="example-title">调整位置</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
			</code-view>
			
			<div class="example-title">字体大小</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
			</code-view>
			
			<div class="example-title">设置颜色</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
			</code-view>
			
			<div class="example-title">&lt;gr-divider&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="60">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="80">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="120">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="./demo.html#/dividerdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
htmlCode1: `<gr-divider>文本内容</gr-divider>`,
jsCode1: `import {Divider} from 'gabriel-ui'
Vue.use(Divider)`,
htmlCode2: 
`<gr-divider pos="left">文本内容</gr-divider>
<gr-divider pos="right">文本内容</gr-divider>
`,
htmlCode3: `<gr-divider font-size="20px">文本内容</gr-divider>`,
htmlCode4: `<gr-divider text-color="#aa55ff" line-color="#f40" >文本内容</gr-divider>`,
				propertiesExplain: [
					{
						attrName: 'pos',
						introduce: `文本的位置，left表示靠左，center表示居中，right表示靠右`,
						type: 'String',
						optionValues: 'left / center / rgiht',
						defaultValue: 'center'
					},
					{
						attrName: 'font-size',
						introduce: `文本字体大小`,
						type: 'String',
						optionValues: '----',
						defaultValue: '14px'
					},
					{
						attrName: 'text-color',
						introduce: `文本颜色`,
						type: 'String',
						optionValues: '----',
						defaultValue: '#ccc'
					},
					{
						attrName: 'line-color',
						introduce: `线条颜色`,
						type: 'String',
						optionValues: '----',
						defaultValue: '#ccc'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
</style>
